<template>
	<view class="page" @click="pageHandle">
		<!-- <view class="status_bar status_color">
		</view> -->
		<view class="navigation">
			<view class="navigation-header">
				<view class="phone">
					<image src="../../static/home/phone.svg" class="search-ico" @click="handlePhone"></image>
				</view>
				<uni-search-bar class="seach-input" cancelButton="none" clearButton="none" @confirm="searchHandle"
					@input="" v-model="searchValue" placeholder="一品鲜肉" />
				<view class="search-add">
					<image src="../../static/home/add.svg" class="search-ico" @click.stop="handleDrop"></image>
					<view class="view-dialog" v-if="flag">
						<view class="view-dialog-single" v-for="(item,index) in headerRightList" :key="index"
							@click="handleScan">
							<image :src="item.path" class="view-dialog-image"></image>
							<view class="view-dialog-text">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 搜索之下的行，扫一扫 -->
			<view class="search-block">
				<view class="search-icon-single" v-for="(item,index) in searchList" :key="index">
					<image :src="item.icon" class="search-icon-list"></image>
					<view>
						{{item.name}}
					</view>
				</view>
			</view>

		</view>

		<!-- 按钮集合 -->
		<view class="search-icons">
			<view class="search-icons-single" v-for="(item,index) in searchIcons" :key="index"
				@click="viewDetail(item)">
				<image :src="item.icon" class="search-icon-handle"></image>
				<view class="">
					{{item.name}}
				</view>
			</view>
		</view>
		<!-- 轮播图 -->
		<!-- <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="carousel">
			<swiper-item v-for="(item,index) in carouseList" :key="index">
				<image :src="item.path" mode="" class="carousel"></image>
			</swiper-item>
		</swiper> -->
		<!-- 热门超英 -->
		<view class="page-block super-hot">
			<view class="hot-title-wapper">
				<image src="../../static/icons/hot.png" class="hot-ico" mode=""></image>
				<view class="hot-title">
					热门超英
				</view>
			</view>
		</view>

		<scroll-view scroll-x="true" class="page-block hot">
			<view class="single-poster">
				<view class="poster-wapper" v-for="(item,index) in hotSuperheroList" :key="index">
					<image src="../../static/poster/civilwar.jpg" mode="" class="poster"></image>
					<view class="movie-name">
						{{item.name}}
					</view>
					<trailer-stars :innerScore="item.score" showNum="1"></trailer-stars>
				</view>
			</view>
		</scroll-view>

		<!-- 热门预告 -->
		<view class="page-block super-hot">
			<view class="hot-title-wapper">
				<image src="../../static/icons/interest.png" class="hot-ico" mode=""></image>
				<view class="hot-title">
					热门预告
				</view>
			</view>
		</view>

		<view class="hot-movies page-block">
			<video v-for="(trailer,index) in hotTrailerList" :key="index" :poster="trailer.cover" :src="trailer.path"
				class="hot-movie-single" controls>
			</video>
		</view>

		<!-- 猜你喜欢 -->
		<view class="page-block super-hot">
			<view class="hot-title-wapper">
				<image src="../../static/icons/guess-u-like.png" class="hot-ico" mode=""></image>
				<view class="hot-title">
					猜你喜欢
				</view>
			</view>
		</view>

		<view class="guess-u-like page-block">
			<view class="signle-like-movie" v-for="(gussLike,index) in gussLikeList" :key="index">
				<image :src="gussLike.cover" mode="" class="like-movie"></image>
				<view class="movie-desc">
					<view class="movie-title">
						{{gussLike.name}}
					</view>
					<trailer-stars :showNum="0" :innerScore="gussLike.score"></trailer-stars>
					<view class="movie-info">
						{{gussLike.releaseDate}}
					</view>
					<view class="movie-info">
						{{gussLike.baseInfo}}
					</view>
				</view>
				<view class="movie-oper" :data-index="index" @click="pariseMe">
					<image src="../../static/icons/praise.png" mode="" class="praise-ico"></image>
					<view class="praise-me">
						点赞
					</view>
					<view :animation="animationDataArr[index]" class="praise-me animation-opacity">
						+1
					</view>
				</view>
			</view>
		</view>
		<button type="default" @click="clickhandle">点击</button>
		<!-- 悬浮按钮 -->
		<view>
			<uni-fab horizontal="right" direction="horizontal" :popMenu="false" :content="content"
				@fabClick="fabHandle"></uni-fab>
		</view>
	</view>
</template>

<script>
	// 导出自定义组件
	import trailerStars from "../../components/trailerStars.vue"

	export default {
		components: {
			trailerStars
		},
		data() {
			return {
				// 轮播图
				carouseList: [{
						path: '../../static/swiper/swiper_1.jpg'
					},
					{
						path: '../../static/swiper/swiper_2.jpg'
					},
					{
						path: '../../static/swiper/swiper_3.jpg'
					},
					{
						path: '../../static/swiper/swiper_4.jpg'
					}
				],
				// 热门超英
				hotSuperheroList: [{
						name: '蝙蝠侠',
						cover: '../../static/icons/star-yellow.png',
						moviePath: '../../static/poster/civilwar.jpg',
						score: 8.7,
						plotDesc: ''
					},
					{
						name: '蝙蝠侠',
						cover: '../../static/icons/star-yellow.png',
						moviePath: '../../static/poster/justice.jpg',
						score: 10,
						plotDesc: ''
					},
					{
						name: '蝙蝠侠',
						cover: '../../static/icons/star-yellow.png',
						moviePath: '../../static/poster/civilwar.jpg',
						score: 8.7,
						plotDesc: ''
					},
					{
						name: '蝙蝠侠',
						cover: '../../static/icons/star-yellow.png',
						moviePath: '../../static/poster/justice.jpg',
						score: 8.7,
						plotDesc: ''
					},
					{
						name: '蝙蝠侠',
						cover: '../../static/icons/star-yellow.png',
						moviePath: '../../static/poster/civilwar.jpg',
						score: 8.7,
						plotDesc: ''
					},
					{
						name: '蝙蝠侠',
						cover: '../../static/icons/star-yellow.png',
						moviePath: '../../static/poster/justice.jpg',
						score: 8.7,
						plotDesc: ''
					}
				],
				// 热门预告
				hotTrailerList: [{
						path: '../../static/video/superVideo.mp4',
						cover: "../../static/poster/civilwar.jpg"
					},
					{
						path: '../../static/video/superVideo.mp4',
						cover: "../../static/poster/civilwar.jpg"
					},
					{
						path: '../../static/video/superVideo.mp4',
						cover: "../../static/poster/civilwar.jpg"
					},
					{
						path: '../../static/video/superVideo.mp4',
						cover: "../../static/poster/civilwar.jpg"
					}
				],
				// 点赞动画定义的对象
				animationData: {},
				// 猜你喜欢一系列电影
				gussLikeList: [{
						cover: '../../static/poster/justice.png',
						name: '黑寡妇',
						baseInfo: '本·阿弗莱克 / 亨利·卡米尔 / 哈利·波特人 / 盖亚·耶稣',
						releaseDate: '2020 / 美国 / 科幻 动作',
						score: 5.2
					},
					{
						cover: '../../static/poster/justice.png',
						name: '黑寡妇',
						baseInfo: '本·阿弗莱克 / 亨利·卡米尔 / 哈利·波特人 / 盖亚·耶稣',
						releaseDate: '2020 / 美国 / 科幻 动作',
						score: 5.2
					},
					{
						cover: '../../static/poster/justice.png',
						name: '黑寡妇',
						baseInfo: '本·阿弗莱克 / 亨利·卡米尔 / 哈利·波特人 / 盖亚·耶稣',
						releaseDate: '2020 / 美国 / 科幻 动作',
						score: 5.2
					},
					{
						cover: '../../static/poster/justice.png',
						name: '黑寡妇',
						baseInfo: '本·阿弗莱克 / 亨利·卡米尔 / 哈利·波特人 / 盖亚·耶稣',
						releaseDate: '2020 / 美国 / 科幻 动作',
						score: 5.2
					},
					{
						cover: '../../static/poster/justice.png',
						name: '黑寡妇',
						baseInfo: '本·阿弗莱克 / 亨利·卡米尔 / 哈利·波特人 / 盖亚·耶稣',
						releaseDate: '2020 / 美国 / 科幻 动作',
						score: 5.2
					},
					{
						cover: '../../static/poster/justice.png',
						name: '黑寡妇',
						baseInfo: '本·阿弗莱克 / 亨利·卡米尔 / 哈利·波特人 / 盖亚·耶稣',
						releaseDate: '2020 / 美国 / 科幻 动作',
						score: 5.2
					}
				],
				// 点赞动画定义的数组，真实开发中，在onload中push
				animationDataArr: [{}, {}, {}, {}, {}, {}],
				searchList: [{
						icon: "../../static/home/scan.svg",
						name: "扫一扫"
					},
					{
						icon: "../../static/home/scan.svg",
						name: "收付款"
					},
					{
						icon: "../../static/home/scan.svg",
						name: "出行"
					},
					{
						icon: "../../static/home/scan.svg",
						name: "卡包"
					},
				],
				searchIcons: [{
						icon: "../../static/home/huabei.svg",
						name: "医保"
					},
					{
						icon: "../../static/home/huabei.svg",
						name: "花呗"
					},
					{
						icon: "../../static/home/huabei.svg",
						name: "运动"
					},
					{
						icon: "../../static/home/huabei.svg",
						name: "健康码"
					},
					{
						icon: "../../static/home/huabei.svg",
						name: "充值中心"
					},
					{
						icon: "../../static/home/huabei.svg",
						name: "电影演出"
					},
					{
						icon: "../../static/home/huabei.svg",
						name: "花呗"
					},
				],
				searchValue: '',
				flag: false,
				headerRightList: [{
						path: "../../static/home/scan.svg",
						name: "扫一扫"
					},
					{
						path: "../../static/home/scan.svg",
						name: "扫一扫"
					},
					{
						path: "../../static/home/scan.svg",
						name: "扫一扫"
					},
					{
						path: "../../static/home/scan.svg",
						name: "扫一扫"
					},
				],
				content: [{
					iconPath: "../../static/home/triangle.png",
					// selectedIconPath: '/static/home/triangle.png',
				}],
				pageIndex: 1
			}
		},

		onLoad() {
			// 在页面创建的时候，创建一个临时的动画 
			this.animation = uni.createAnimation()
		},

		onUnload() {
			// 页面卸载的时候，清除动画数据
			this.animation = {}
		},

		// 下拉刷新
		onPullDownRefresh() {
			uni.showLoading({
				mask: true
			})
			uni.showNavigationBarLoading()
		},

		// 滚动到底翻页，请求接口
		onReachBottom() {
			console.log('底部刷新');
			++this.pageIndex
			console.log(this.pageIndex);
			const arr = [{
				cover: '../../static/poster/justice.png',
				name: '黑寡妇加1',
				baseInfo: '本·阿弗莱克 / 亨利·卡米尔 / 哈利·波特人 / 盖亚·耶稣',
				releaseDate: '2020 / 美国 / 科幻 动作',
				score: 5.2
			}]
			this.gussLikeList = this.gussLikeList.concat(arr)
			console.log(this.gussLikeList.concat(arr));
		},

		methods: {
			// 电话
			handlePhone() {
				 	uni.makePhoneCall({
				 	
				 	// 手机号
				    phoneNumber: '111', 
				
					// 成功回调
					success: (res) => {
						console.log('调用成功!')	
					},
				
					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
					}
					
				  });
			},
			
			// 点击空白页面
			pageHandle() {
				this.flag = false
			},

			// 扫一扫
			handleScan() {
				// #ifdef APP
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
				// #endif
			},

			// 悬浮按钮点击
			fabHandle() {
				console.log(123);
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 200
				});
			},

			// 点击出现下拉
			handleDrop() {
				// this.$refs.popup.open('top')
				// e.stopPropagation();
				this.flag = !this.flag
			},

			// 搜索
			searchHandle() {
				console.log('搜索', this.searchValue);
			},

			// 页面跳转
			viewDetail(item) {
				console.log(item);
			},

			// 点击
			clickhandle() {
				uni.hideLoading()
				uni.hideNavigationBarLoading()
				uni.stopPullDownRefresh()
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['camera', 'album'], //这要注意，camera掉拍照，album是打开手机相册
					success: (res) => {
						console.log(res);
						const tempFilePaths = res.tempFilePaths;
					},
					complete() {
						uni.stopPullDownRefresh()
					}
				});
			},
			// 实现点赞动画效果
			pariseMe(e) {
				const index = e.currentTarget.dataset.index
				// console.log(index);
				this.animation.translateY(-60).opacity(1).step({
					duration: 300,
					timingFunction: "ease"
				})
				// 导出动画数据到view组件，实现组件的动画效果
				this.animationData = this.animation
				// 移除动画效果
				setTimeout(function() {
					this.animation.translateY(0).opacity(0).step({
						duration: 0
					});
					this.animationData = this.animation
					this.$set(this.animationDataArr, index, this.animationData.export())
				}.bind(this), 600)
			}
		}
	}
</script>

<style scoped lang="scss">
	@import url("index.scss");
</style>
